<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>博客详情页</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blogDetail.css">
    <link rel="stylesheet" href="layui-v2.8.0/layui/css/layui.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css"/>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <style>
        .layui-row {
            height: 50px;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
<!--导航栏-->
<div class="layui-row">
    <div class="layui-col-md7">
        <div class="grid-demo grid-demo-bg1">
            <div>
                <img src="images/logo.png" alt="">
                <span>博客系统</span>
            </div>
        </div>
    </div>


    <div class="layui-col-md1">
        <div class="grid-demo grid-demo-bg1">
            <a href="myblog.html" id="delete">
                <img src="images/myblog.png" alt="">
                <span>我的博客</span>
            </a>
        </div>
    </div>

    <div class="layui-col-md1">
        <div class="grid-demo grid-demo-bg1">
            <img src="images/author.png" alt="">
            <span id="author">作者:</span>
        </div>
    </div>

    <div class="layui-col-md1">
        <div class="grid-demo grid-demo-bg1">
            <a href="blogList.html">
                <img src="images/collect.png" alt="">
                <span>博客列表</span>
            </a>
        </div>
    </div>

    <div class="layui-col-md1">
        <div class="grid-demo grid-demo-bg1">
            <a href="blogPublish.html">
                <img src="images/write.png" alt="">
                <span>发布博客</span>
            </a>
        </div>
    </div>

    <div class="layui-col-md1">
        <div class="grid-demo grid-demo-bg1">
            <a href="javascript:logout()">
                <img src="images/logout.png" alt="">
                <span>退出登录</span>
            </a>
        </div>
    </div>
</div>
</div>


<!--内容-->
<div class="container">
    <!--标题 -->
    <div class="title">

    </div>
    <!--时间 + 阅读量-->
    <div class="date">
        发布时间:
        <span id="time"></span>
        &nbsp;&nbsp;阅读量:
        <span id="readCount"></span>
    </div>
    <!--正文 -->
    <div id="content">

    </div>
</div>
<script>
    var editormd;

    function initEdit(md) {
        editormd = editormd.markdownToHTML("content", {
            markdown: md, // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    }

    function blogDelete() {
        let deleteBtn = document.querySelector('#delete');
        deleteBtn.href = 'blogDelete' + location.search;
    }

    blogDelete();

    function getArtDetail(id) {
        if (id === "") {
            alert('非法参数');
            return;
        }
        $.ajax({
            type: 'post',
            url: '/art/detail',
            data: {
                "id": id
            },
            success: function (body) {
                if (body && body.code === 200) {
                    jQuery('.title').html(body.data.title);
                    jQuery('#time').html(body.data.updateTime);
                    jQuery('#readCount').html(body.data.rcount);
                    initEdit(body.data.content);
                    // 查询文章作者
                    getUserName(id);
                } else {
                    alert('查询失败,请重试!');
                }
            }
        })
    }

    getArtDetail(getUrlValue("id"));

    function getUserName(id) {
        $.ajax({
            type: 'post',
            url: '/user/getusername',
            data: {
                "id": id
            },
            success: function (body) {
                if (body && body.code === 200) {
                    let username = document.querySelector('#author');
                    username.innerHTML = body.data.username;
                } else {
                    alert('查询失败,请稍后重试!');
                }
            }
        })
    }

    function updateRCount() {
        let id = getUrlValue("id");
        if (id !== "") {
            $.ajax({
                type: 'post',
                url: '/art/updatecount',
                data: {
                    "id": id
                },
                success: function (body) {

                }
            })
        }

    }

    updateRCount();
</script>
</body>

</html>